<template>
  <div>
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>门票信息</el-breadcrumb-item>
      
    </el-breadcrumb>
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
      <div>
        <!--    功能区-->
        <div style="margin: 10px 0">
          <!--    搜索区-->
          <div style="margin: 10px 0;display:flex;justify-content:start;">
            <div>
              <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">景点名称</span>
              <el-input v-model="search" size="small" clearable placeholder="请输入景点名称" prefix-icon="el-icon-search"
                style="width: 200px;" />
            </div>
            <div>
              <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">状态</span>
              <el-select v-model="value" size="small" placeholder="请选择" clearable style="width:90px;margin-right: 20px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>

              </el-select>
            </div>
            <div class="block">
              <span style="margin-left: 40px; margin-right: 14px; font-size: 15px; font-weight: 700;">日期</span>
              <el-date-picker v-model="s_actDatetime" type="date" placeholder="选择日期" :picker-options="pickerOptions"
                size="small" style="width: 120px;margin-right:20px">
              </el-date-picker>
            </div>
            <div>



              <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;"
                size="small">搜索</el-button>
              <el-button icon="el-icon-refresh-left" style="margin-left: 5px;" @click="reset" size="small">重置</el-button>
            </div>
          </div>
        </div>
        <!--    表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%"
          :row-style="{ height: '32px' }" :cell-style="{ padding: '4px' }">



          <el-table-column label="#" type="index" />
          <el-table-column label="门票编号" prop="ticketId" sortable width="130px"/>
          <el-table-column v-if="false" label="景区编号" prop="scId" sortable />
          <el-table-column label="景点名称" prop="scName" width="180px" />
          <el-table-column label="儿童票/￥" prop="childPrice" sortable />
          <el-table-column label="学生票/￥" prop="studentPrice" sortable />
          <el-table-column label="成人票/￥" prop="adultPrice" sortable />
          <el-table-column label="剩余" prop="num" sortable />
          <el-table-column label="已售" prop="sellNum" sortable width="100px"/>
          <el-table-column label="日期" prop="tkDate" />
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.tkStatus&&compare(scope.row.tkDate)" type="success">在售</el-tag>
              <el-tag v-else type="danger">停售</el-tag>
            </template>
          </el-table-column>

          <!--      操作栏-->
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button v-if ="scope.row.tkStatus&&compare(scope.row.tkDate)" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              
              <el-button v-if="scope.row.tkStatus&&compare(scope.row.tkDate)" size="mini" type="danger"
                @click="handleStatus(scope.$index, scope.row, false)">停售
              </el-button>

              <el-button v-if="!scope.row.tkStatus&&compare(scope.row.tkDate)" size="mini" type="success" @click="handleStatus(scope.$index, scope.row, true)">开售
              </el-button>

            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <div>
          <!--      弹窗-->
          <el-dialog :visible.sync="dialogVisible" title="修改" width="50%" @close="cancel" top="30px">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <div style="display: flex;justify-content:space-between;width: 80%;">
                <el-form-item label="儿童票/￥" prop="childPrice">
                  <el-input v-model="form.childPrice" style="width: 80%"></el-input>
                </el-form-item>

                <el-form-item label="学生票/￥" prop="childPrice">
                  <el-input v-model="form.studentPrice" style="width: 80%"></el-input>
                </el-form-item>

                <el-form-item label="成人票/￥" prop="childPrice">
                  <el-input v-model="form.adultPrice" style="width: 80%"></el-input>
                </el-form-item>

              </div>

              <el-form-item label="修改剩余票数" prop="childPrice">
                <el-input v-model="form.num" style="width: 20%"></el-input>
              </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
            
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: "TicketInfo",
  data() {



    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      s_actDatetime: null,
      options: [
        {
          value: 1,
          label: '在售'
        },
        {
          value: 0,
          label: '停售'
        }
      ],
      value: '',
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
      search: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      CoverdialogVisible: false,
      MoredialogVisible: false,
      tableData: [
        {
          ticketId: 1,
          scId: 1,
          scName: '张家界森林公园',
          childPrice: 100,
          studentPrice: 150,
          adultPrice: 200,
          num: 1996,
          initNum: 2000,
          tkDate: '2021-11-02',
          tkStatus: 1,
          sellNum: 3
        }
      ],
      form: {
        ticketId: 1,
        scId: 1,
        scName: '张家界森林公园',
        childPrice: 100,
        studentPrice: 150,
        adultPrice: 200,
        num: 1996,
        initNum: 2000,
        tkDate: '2021-11-02',
        tkStatus: 1,
        sellNum: 3
      },
      rules: {

        actName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],

        actDetail: [{ required: true, message: "请输入活动介绍", trigger: "change" }],


        actTime: [


        ],
        actDatetime: [
          {
            required: true, message: "请选择日期", trigger: "blur"
          }
        ]
      },
      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {

    compare(tkdate){
      const d1 = new Date(tkdate)
      const d2 = new Date();
      return d1>=d2;
    },
    handleStatus(index, row, status) {
      if(!status){
        this.$confirm("确定要停售吗?", "确认提示", {
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "确认", //确认按钮文字
        cancelButtonText: "取消", //取消按钮文字
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      }).then(() => {  //选择确认按钮进入此方法
        request.get("/ticket/delete" ,
        {
          params : {
            ticketId:row.ticketId
        },
        }
        ).then(res => {
          console.log(row.ticketId)
          if (res.code === "1") {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.tableData[index].tkStatus = status
          }
          else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => { //选择取消按钮进入此方法
        //取消操作
       
      })
      }else{
        request.get("/ticket/delete" ,
            {
              params : {
                ticketId:row.ticketId
            },
          }
        ).then(res => {
          console.log(row.ticketId)
          if (res.code === "1") {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.tableData[index].tkStatus = status
          }
          else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        }).catch(() => { //选择取消按钮进入此方法
        //取消操作
       
      })
      }
     
    },
  
    async load() {
      let  cd = ""
      if(this.s_actDatetime==null){
          cd = null
      }else{
       
      let d  = new Date(this.s_actDatetime)
      const yy = d.getFullYear()
      const mm = d.getMonth()+1
      const dd = d.getDate()
    
      const l = '0'
      cd = cd+yy
      if(mm<10){
        cd = cd+'-'+l+mm
      }else{
        cd = cd+'-'+mm
      }
      if(dd<10){
        cd = cd+'-'+l+dd
      }else{
        cd = cd+'-'+dd
      }

      console.log(cd)
      
      }
      

      request.get("/ticket/adminlist", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                search: this.search,
                value:this.value,
                sDate:cd
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        });
    },
    reset() {
      // this.search = ''
      // request.get("/ticket/find", {
      //     params: {
      //         pageNum: 1,
      //         pageSize: this.pageSize,
      //         search: this.search,
      //     },
      // }).then((res) => {
      //     console.log(res);
      //     this.tableData = res.data.records;
      //     this.total = res.data.total;
      //     this.loading = false;
      // });
    },
    handleDelete(index, row) {
      // 确认框确认是否要删除
      this.$confirm("确定要删除" + row.stuName + "的信息吗?", "删除提示", {
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "残忍删除", //确认按钮文字
        cancelButtonText: "取消删除", //取消按钮文字
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      }).then(() => {  //选择确认按钮进入此方法
        request.delete("/ticket/delete/" + row.stuId).then(res => {
          console.log(row.stuId)
          if (res.code === "1") {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.load()
          }
          else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => { //选择取消按钮进入此方法
        //取消操作
        alert('取消')
      });
    },
    handleEdit(index, row) {
      this.judge = true;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.form = JSON.parse(JSON.stringify(row));
        this.editDisplay = { display: "block" };
      });
    },
    cancel() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    save() {
      this.$refs.form.validate(vaild => {
        if (vaild) {
         


            //先表单验证，再放put请求
            request.put("/ticket/update", this.form).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.search = "",
                this.load();
                this.dialogVisible = false
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
        }
      })


    },
 
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },

  }


}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
</style>